<template>
  <div class="box login">
    <van-nav-bar
      title="登录"
      left-text="返回"
      right-text="注册"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-tabs v-model="activeName" animated>
      <van-tab title="账号密码登录" name="a">
        <van-form @submit="onSubmit1">
          <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ pattern1, message: '请输入正确内容' }]"
          />
          <van-field
            v-model="password1"
            type="password"
            name="password1"
            placeholder="密码"
            :rules="[{ pattern2, message: '请输入正确内容' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">登录</van-button>
          </div>
        </van-form>
      </van-tab>
      <van-tab title="手机号登录" name="b">
        <van-form @submit="onSubmit2">
          <van-field
            v-model="tel"
            name="tel"
            placeholder="手机号"
            :rules="[{ pattern3, message: '请输入正确内容' }]"
          />
          <van-field
            v-model="password2"
            type="password"
            name="password2"
            placeholder="密码"
            :rules="[{ pattern4, message: '请输入正确内容' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">登录</van-button>
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Tab, Tabs, Form, field, button, Toast } from 'vant'
import { login } from '@/api/request.js'

Vue.use(NavBar)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Form)
Vue.use(field)
Vue.use(button)
Vue.use(Toast)

export default {
  data () {
    return {
      activeName: 'a',
      username: '',
      password1: '',
      password2: '',
      tel: '',
      pattern1: /^\w{3,16}$/,
      pattern2: /^\w{3,16}$/,
      pattern3: /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
      pattern4: /^\w{3,16}$/
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      this.$router.push('/register')
    },
    onSubmit1 (v) {
      const that = this
      login({
        username: v.username,
        password: v.password1
      }).then(data => {
        switch (data.data.code) {
          case 200:
            // 存储登录状态:token
            sessionStorage.setItem('token', data.data.token)
            // 存储用户id:msg
            sessionStorage.setItem('userId', data.data.msg)
            // 前端的临时的登录状态：isLogin:ok
            sessionStorage.setItem('isLogin', 'ok')
            Toast({
              message: '登录成功',
              onClose () {
                that.$router.push('/home')
              }
            })
            break
          case 201:
            Toast('用户名不存在')
            break
          case 202:
            Toast('密码错误')
            break
        }
      })
    },
    onSubmit2 () {},
    unTest () {
      return /^\w{3,16}$/.test(this.username)
    },
    pw1Test () {
      return /^\w{3,16}$/.test(this.password1)
    }
  }
}
</script>

<style>
</style>
